<template>
  <div class="anniversary">
    <div class="bannerWrap" id="tree">
      <img src="@/assets/img/activity/valentine/dmTitle.png" alt=""
      v-if="$store.state.app.language === 'zh-CN'
      || $store.state.app.language === 'zh-TW'">
      <img src="@/assets/img/activity/valentine/dmTitleen.png" alt="" v-else style="width: 600px;">
    </div>
    <div class="bigBack">
      <!-- 视频 -->
      <div class="video" id="video">
        <!-- <img src="@/assets/img/activity/valentine/videoLeft.png" alt="" class="videoLeft">
        <img src="@/assets/img/activity/valentine/videoRight.png" alt="" class="videoRight"> -->
        <span class="video-btn" @click="handlePlayVideo"></span>
        <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
      </div>
      <div class="btnJump flexc">
        <span @click="handleToOtc">{{ $t('christmas2019.chris54') }}</span>
      </div>
      <a href="https://www.chainnode.com/post/364022" target="_blank" class="hidden" ref="chainNode"></a>
      <!-- 周年庆惊喜转不停-->
      <draw @listenWalletPermission="handleWalletPermission" id="draw"/>
      <div class="symbleTitle">
        <i class="line"></i>
        <span>{{ $t('christmas2019.chris49') }}</span>
        <i class="line"></i>
      </div>
      <!-- 交易对 -->
      <symble-list />
      <p class="center" style="margin-top: 50px; color: rgba(241, 200, 157, .8);">
        * {{ $t('activity.toNewdex') }}
      </p>
    </div>
    <!-- 视频播放组件 -->
    <my-video
      :video-config="videoConfig"
      @listenVideoLevel="handleVideoLevel"/>
    <!-- 锚点 -->
    <transition name="el-fade-in-linear">
      <div class="anchorPoint hidden" v-show="btnFlag">
        <div>
          <a href="#tree">{{ $t('christmas2019.chris50') }}</a>
        </div>
        <div>
          <a href="#video">{{ $t('christmas2019.chris51') }}</a>
        </div>
        <div>
          <a href="#img">{{ $t('christmas2019.chris52') }}</a>
        </div>
        <div>
          <a href="#draw">
            {{ $t('christmas2019.chris53') }}
          </a>
        </div>
        <div class="flexc" @click="handleBackTop">
          <i class="iconfont el-icon-arrow-up"></i>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import MyVideo from '@/components/Video';
import Draw from './Draw';
import SymbleList from './SymbleList';
// https://youtu.be/BmIHUh0PVa0
// https://www.youtube.com/embed/BmIHUh0PVa0
export default {
  name: 'anniversary', // 周年活动
  data() {
    return {
      videoUrl: '',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/BmIHUh0PVa0', // 国外访问视频地址
        zh: 'https://cdn.340wan.com/otc-fast.mp4' // 国内
      },
      active: 0,
      btnFlag: false, // 锚点
      scrollTop: 0, // 滚动距离
      walletList: [
        {
          id: 1,
          logoImg: '/static/activity/christmas/et1.png',
          ewmImg: '/static/activity/christmas/et.png',
          title: 'name1',
          word: 'desc1',
          time: 'time1',
        },
        {
          id: 2,
          logoImg: '/static/activity/christmas/tp1.png',
          ewmImg: '/static/activity/christmas/tp.png',
          title: 'name2',
          word: 'desc2',
          time: 'time2',
        },
        {
          id: 3,
          logoImg: '/static/activity/christmas/meetone1.png',
          ewmImg: '/static/activity/christmas/meetone.png',
          title: 'name3',
          word: 'desc3',
          time: 'time3',
        },
        {
          id: 4,
          logoImg: '/static/activity/christmas/starteos1.png',
          ewmImg: '/static/activity/christmas/starteos.png',
          title: 'name4',
          word: 'desc4',
          time: 'time4',
        },
        {
          id: 5,
          logoImg: '/static/activity/christmas/paytomat1.png',
          ewmImg: '/static/activity/christmas/paytomat.png',
          title: 'name5',
          word: 'desc5',
          time: 'time5',
        },
        {
          id: 6,
          logoImg: '/static/activity/christmas/gl1.png',
          ewmImg: '/static/activity/christmas/gl.png',
          title: 'name6',
          word: 'desc6',
          time: 'time6',
        },
        {
          id: 7,
          logoImg: '/static/activity/christmas/bitkeep1.png',
          ewmImg: '/static/activity/christmas/bitkeep.png',
          title: 'name7',
          word: 'desc7',
          time: 'time7',
        },
        {
          id: 8,
          logoImg: '/static/activity/christmas/mz1.png',
          ewmImg: '/static/activity/christmas/mz.png',
          title: 'name8',
          word: 'desc8',
          time: 'time8',
        },
        {
          id: 9,
          logoImg: '/static/activity/christmas/kx1.png',
          ewmImg: '/static/activity/christmas/kx.png',
          title: 'name9',
          word: 'desc9',
          time: 'time9',
        },
        {
          id: 10,
          logoImg: '/static/activity/christmas/bepal1.png',
          ewmImg: '/static/activity/christmas/bepal.png',
          title: 'name10',
          word: 'desc10',
          time: 'time10',
        }
      ],
    }
  },
  components: {
    MyVideo,
    Draw,
    SymbleList
  },
  props: {},
  watch: {
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop);
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    // 视频播放
    handlePlayVideo() {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = this.videoConfig.en;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoUrl = this.videoConfig.zh;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },
    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
    /**
     * 钱包授权
     */
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 监听滚动事件
    scrollToTop() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollTop = scrollTop
      if (this.scrollTop > 540) {
        this.btnFlag = true
      } else {
        this.btnFlag = false
      }
    },
    // 回到顶部
    handleBackTop() {
      const timer = setInterval(() => {
        const ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = this.scrollTop + ispeed; // eslint-disable-line
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10)
    },
    // 跳转OTC
    handleToOtc() {
      this.$router.push({
        name: 'otc'
      })
    },
    // 跳转账号
    handleToJump(trxId) {
      window.open(`https://bloks.io/tx/${trxId}`);
    }
  },
}
</script>
<style lang="scss" scoped>
$-btn-color: #fff;
$-btn-back: #ff3f67;
.anniversary {
  color: #fff;

  .bigBack {
    background: linear-gradient(to bottom, #ffeaf1 50%, #f73456);
    padding-bottom: 40px;
  }

  .anchorPoint {
    transition: all 1s;
    position: fixed;
    top: 300px;
    left: 50%;
    margin-left: 640px;
    background: $-btn-back;
    color: $-btn-color;
    padding: 10px 20px;
    z-index: 19;
    & > div {
      padding: 10px 0;
      border-bottom: 1px solid $-btn-color;
      line-height: 30px;
      cursor: pointer;
      text-align: center;

      &:last-child {
        border: 0;
      }

      i {
        font-size: 28px;
      }

      a:hover {
        color: $-btn-color;
      }
    }
  }

  .cursorPointer {
    cursor: pointer;
  }

  .bannerWrap {
    padding-top: 150px;
    height: 577px;
    background: url('../../../assets/img/activity/valentine/backTop.png');
    background-size: cover;
    // background-size: 100% 100%;

    img {
      display: block;
      width: 475px;
      margin: 0 auto;
    }
  }


  .video {
    width: 913px;
    height: 500px;
    background: url('../../../assets/img/activity/valentine/video.png');
    position: relative;
    margin: 0px auto 30px;
    background-size: 100% 100%;

    .video-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      background: url('../../../assets/img/videoplay.png');
      background-size: cover;
      cursor: pointer;
    }

    .videoLeft, .videoRight {
      position: absolute;
      bottom: -20px;
      width: 150px;
    }

    .videoLeft {
      left: -30px;
    }

    .videoRight {
      right: -30px;
      top: 100px;
    }
  }

  .title {
    text-align: center;
    font-size: 40px;
    margin: 120px 0 60px 0;
    color: #FFC78A;
  }

  .title1 {
    img {
      display: block;
      width: 234px;
      margin: 50px auto 30px;
    }
  }

  .symbleTitle {
    margin: 50px auto 0;
    width: 1000px;
    display: flex;
    align-items: center;
    color: #F1C89D;

    span {
      padding: 0 10px;
    }

    .line {
      flex: 1;
      height: 2px;
      display: block;
      background-color: #F1C89D;
    }
  }

  .btnJump {
    span {
      color: #fff;
      background: $-btn-back;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
    }
  }
}
</style>

